<template>
  <div>
    
    <div>
      <el-input type="text" v-model="str"></el-input>
      <el-button @click="addTypeClick">add</el-button>
      <div>
        <div v-for="(item, index) in typeList" :key="`type_${index}`" @click="addSelType(item.id)">{{item.name}}</div>
      </div>
    </div>

    <div>
      <el-input type="text" v-model="title"></el-input>
      <div>
        <span v-for="(item, index) in selTypeId" :key="`seled_${index}`" style="margin: 2px">
          {{typeListMap[item] || ''}}
        </span> 
      </div>
      <el-button @click="addItemClick">add</el-button>
      <div>
        <div v-for="(item, index) in itemList" :key="`item_${index}`" >
          <div>{{item.title}}</div>
          <div style="margin-left: 20px"> 
            <span style="margin: 2px" v-for="(item, num) in item.types" :key="`item_${index}_own_${num}`">
              {{typeListMap[item] || ''}}
            </span> 
          </div>
        </div>
      </div>
    </div>

    <div>
      <el-button @click="getItemCountClick">get count</el-button>
      <div>
      {{typeCountList}}
      </div>
    </div>
  </div>

</template>
<script>
import testTypeMixin from '$my/code/mixin/test-type'
import testItemMixin from '$my/code/mixin/test-item'
export default {
  mixins: [testTypeMixin, testItemMixin],
  components: {},
  props: {
  },
  data() {
    return {
      str: '',
      selTypeId: [],
      title: '',
      typeList: [],
      itemList: [],
      typeCountList: []
    }
  },
  computed: {
    typeListMap() {
      if (!this.typeList.length) {
        return {}
      } else {
        return this.typeList.reduce((total, item) => {
          total[item.id] = item.name
          return total
        }, {})
      }
    }
  },
  methods: {
    addSelType(data) {
      const targetIndex = this.selTypeId.findIndex((item) => {
        return item.id === data
      })
      if (targetIndex < 0) {
        this.selTypeId.push(data)
      }
    },
    addTypeClick() {
      this.addTestType({
        data: {
          name: this.str
        }
      }).then((res) => {
        console.log(res)
        this.getTypeList()
      })
    },
    getTypeList() {
      this.fetchTestType({data: {}}).then((res) => {
        console.log(res)
        this.typeList = res.list
      })
    },
    addItemClick() {
      this.addTestItem({
        data: {
          title: this.title,
          types: this.selTypeId
        }
      }).then((res) => {
        console.log(res)
        this.getTestItems()    
      })
    },
    getTestItems() {
      this.fetchTestItem({data: {}}).then((res) => {
        console.log(res)
        this.itemList = res.list
        this.selTypeId = []
      })
    },
    getItemCountClick() {
      this.calcItemCount().then((res) => {
        
        const calcList = this.setTypeCountList(res)
        console.log('count', calcList)
        this.typeCountList = calcList
      })
    },
    setTypeCountList(typeCount) {
      return typeCount.map((item) => {
        return {
          name: this.typeListMap[item._id],
          count: item.count
        }
      })
    }
  },
  created() {
  },
  mounted() {
    this.getTypeList()
    this.getTestItems()
  }
}
</script>
<style lang="scss" scoped>
</style>